<template>
    <div class="cursor-pointer relative">
        <vxe-image ref="imgRef" :src="value[field]" v-bind="props" v-on="events"></vxe-image>
        <!-- 垫片 -->
        <div @click="view" class="absolute top-0 left-0 right-0 bottom-0 "></div>
    </div>
</template>

<script>
import { cloneDeep } from '@/utils';
export default {
    data() {
        return {
            defaultProps: {
                height: 30
            }
        }
    },
    computed: {
        field() {
            return this.$attrs.column.field
        },
        props() {
            return {
                ...this.defaultProps,
                ...this.$attrs.column.cellRender.props,
            }
        },
        events() {
            return this.$attrs.column.cellRender.events
        },
        value() {
            return cloneDeep(this.$attrs.row)
        }
    },
    methods: {
        view() {
            this.$refs.imgRef.clickEvent()
        }
    }
}
</script>

<style lang="scss" scoped></style>